<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/product.css">
    <style>
        .banner{
            position: relative;
        }
        .banner>.images{
            position: relative;
            height: 550px;
        }
        .banner>.images .item {
            /*图片过大不显示滚动条*/
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            overflow: hidden;
            opacity: 0;
            transition: opacity 1s ease;

        }
        .banner>.images .active{
            opacity: 1;
        }
        .banner>.images .item img{
            width: 1920px;
            height: 550px;
            /*实现图片居中显示*/
            position: relative;
            left: 50%;
            transform: translateX(-50%);
        }
        .indicator {
           position: absolute;
            display: flex;
            left: 50%;
            transform: translateX(-50%);
            bottom: 30px;

        }
        .indicator .item {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #aaa;
            margin: 0 10px;
            cursor: pointer;
        }
        .indicator .active {
            background-color: #f00;
        }
    </style>
</head>
<body>
<!--轮播图-->
    <div class="banner">
        <ul class="images">

        </ul>
        <div class="control">
            <button class="pre">上一个</button>
            <button class="next">下一个</button>
        </div>
        <div class="indicator">

        </div>
    </div>


<!--商品展示-->
    <div class="wrapper">
        <div class="breadCrumb">
            <span class="item">首页</span>
            <span>&gt;</span>
            <span class="item">笔记本</span>
        </div>
        <div class="operation">
            <ul class=" row category">
                <li class="item">分类：</li>
                <li class="item" >笔记本</li>
                <li class="item" >台式机</li>
                <li class="item" >智慧屏</li>
            </ul>
            <ul class=" row discount">
                <li class="item">服务优惠：</li>
                <li class="item" data-type="1">仅看有货</li>
                <li class="item" data-type="2">分期免息</li>
                <li class="item" data-type="3">优惠商品</li>
            </ul>
            <ul class=" row sort">
                <li class="item">排序：</li>
                <li class="item active">综合</li>
                <li class="item">最新</li>
                <li class="item">评论数</li>
                <li class="item">价格</li>
            </ul>
        </div>
        <ul class="products">
<!--            <li class="item">-->
<!--                <a href="#">-->
<!--                    <img src="./img/product_01.webp" alt="" class="album">-->
<!--                    <div class="name">HUAWEI P50 Pro</div>-->
<!--                    <div class="discount">-->
<!--                        预订省50元|尾款24期免息-->
<!--                    </div>-->
<!--                    <div class="price">-->
<!--                        ￥6400-->
<!--                    </div>-->
<!--                    <div class="service">-->
<!--                        <span class="tip">分期免息</span>-->
<!--                        <span class="tip">赠送积分</span>-->
<!--                    </div>-->
<!--                    <div class="comment">-->
<!--                        <span>3190人评价</span>-->
<!--                        <span>99%好评</span>-->
<!--                    </div>-->
<!--                </a>-->
<!--            </li>-->
        </ul>
    </div>
    <script src="json/product_data.js"></script>
    <script src="json/banner.js"></script>
    <script src="js/goodsListShow.js"></script>
<script>
    const imagesEl = document.querySelector('.images')
    const bannerServerURL= 'https://res.vmallres.com/'
    /*拿到当前活跃的item 动态添加轮播图*/
    let activeElItem = null
    for(let i=0;i<banners.length;i++){
        let banner = banners[i]
        const itemEl = document.createElement('li')
        itemEl.classList.add('item')
        if(i===0){
            itemEl.classList.add('active')
            activeElItem=itemEl
        }
        imagesEl.append(itemEl)
        const imageEl = document.createElement('img')
        imageEl.src=`${bannerServerURL}${banner.imgUrl}`
        itemEl.append(imageEl)
    }
    /*动态添加指示器*/
    const indicatorEl = document.querySelector('.indicator')
    for(let i =0;i<banners.length;i++){
        const itemEl = document.createElement('div')
        itemEl.classList.add('item')
        if(i===0){
            itemEl.classList.add('active')
        }
        indicatorEl.append(itemEl)
        itemEl.index = i
        itemEl.addEventListener('click',(event)=>{
            previousIndex=currentIndex
            currentIndex=event.currentTarget.index
            switchItem()
        })
    }
    /*轮播的控制*/
    /*前一个的banner的opacity要变为0；后一个要变为1*/
    let currentIndex = 0
    let previousIndex = 0
    const nextBtnEl = document.querySelector('.next')
    const preBtnEl = document.querySelector('.pre')
    nextBtnEl.addEventListener('click',function (){
        previousIndex=currentIndex
        currentIndex++
        if(currentIndex === banners.length){
            currentIndex=0
        }
        switchItem()
    })
    preBtnEl.addEventListener('click',function (){
        previousIndex=currentIndex
        currentIndex--;
        if(currentIndex <0){
            currentIndex= banners.length-1
        }
        switchItem()
    })
    /*自动轮播*/
    let timer = null
    const startTimer = ()=>{
        timer = setInterval(()=>{
            nextBtnEl.click()
        },3000)
    }
    const stopTimer = () =>{
        clearInterval(timer)
    }
    startTimer()
    /*暂停轮播*/
    imagesEl.addEventListener('mouseenter',()=>{
        stopTimer()
    })
    imagesEl.addEventListener('mouseleave',()=>{
        startTimer()
    })
    const switchItem =()=>{
        /*切换图片item*/
        const currentItemEl = imagesEl.children[currentIndex]
        const previousItemEl = imagesEl.children[previousIndex]
        previousItemEl.classList.remove("active")
        currentItemEl.classList.add("active")
        /*切换指示器的item*/
        const currentIndicatorItemEl = indicatorEl.children[currentIndex]
        const previousIndicatorItemEl = indicatorEl.children[previousIndex]
        previousIndicatorItemEl.classList.remove('active')
        currentIndicatorItemEl.classList.add('active')
    }
</script>
</body>
</html>